<%@ page language="java" import="java.util.*" pageEncoding="utf8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
    var request;
    function clearChildType() {
        var childType = document.getElementById("childType");
        childType.options.length = 0;
        childType.options[0] = new Option("==请选择==", "0");
    }
    function clickTypeId(value) {
        if (value != null) {
            if (value == "0") {
                clearChildType();
            }
            var url = "FindListType?typeId=" + value;
            sendRequest(url);
        }
    }
    function sendRequest(url) {
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        }
        if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.open("post", url, true);
        request.onreadystatechange = processRequest;
        request.setRequestHeader("if-Modified-Since", "0");
        request.send(null);
    }
    function processRequest() {

        if (request.readyState == 4 && request.status == 200) {
            var re = request.responseXML.getElementsByTagName("childType");
            clearChildType();
            var childType = document.getElementById("childType");
            for (var i = 0; i < re.length; i++) {
                var childTypeId = re[i].getElementsByTagName("childTypeId")[0];
                var childTypeName = re[i].getElementsByTagName("childTypeName")[0];
                var option = document.createElement("option");
                option.value = childTypeId.firstChild.data;
                option.text = childTypeName.firstChild.data;
                childType.options[i + 1] = option;
                //childType.appendChild(option);
            }
        }
    }
</script>
<div>

    <form action="AddBooks" name="form1" method="post" enctype="multipart/form-data">
        <table width="100%">
            <tr>
                <td height="50px" colspan="4">
                    请选择图书分类
                    <c:if test="${listBean!=null}">

                        <select name="type" onchange="clickTypeId(this.value)">
                            <option value="0">==请选择==</option>
                            <c:forEach items="${listBean}" var="listBean">
                            <option value="${listBean.typeId }">${listBean.typeName }
                                </c:forEach>
                        </select>
                    </c:if>&nbsp;&nbsp;
                    <select name="childType" id="childType">
                        <option>==请选择==</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td width="100px" height="150px">
                    <ul type=null>
                        <li>书名</li>
                        <li>图书ISBN</li>
                        <li>价格</li>
                        <li>作者</li>


                    </ul>

                </td>
                <td width="400px">
                    <ul type=null>
                        <li><input type="text" name="bookName" checked="checked"/></li>
                        <li><input type="text" name="bookISBN"/></li>
                        <li><input type="text" name="bookPrice"/></li>
                        <li><input type="text" name="bookAuthor"/></li>
                    </ul>

                </td>
                <td width="100px">
                    <ul type=null>

                        <li>数量</li>
                        <li>出版社</li>
                        <li>版次</li>
                        <li>页数</li>

                    </ul>

                </td>
                <td>
                    <ul type=null>
                        <li><input type="text" name="bookNum"/></li>
                        <li><input type="text" name="bookPub"/></li>
                        <li><input type="text" name="bookPubTime"/></li>
                        <li><input type="text" name="bookPage"/></li>
                    </ul>

                </td>
            </tr>

            <tr>
                <td>
                    首页显示
                </td>
                <td colspan="3">
                    <input type="radio" name="bookShowIndex" value="1" checked="checked"/>是
                    <input type="radio" name="bookShowIndex" value="0"/>否
                </td>
            </tr>
            <tr>
                <td>
                    图片
                </td>
                <td colspan="3">
                    <input type="file" name="bookPhoto"/>
                </td>
            </tr>
            <tr height="90px" valign="middle">
                <td>
                    描述
                </td>
                <td colspan="3">
                    <textarea rows="5" cols="80" name="bookDescribe"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    备注
                </td>
                <td colspan="3">
                    <textarea rows="5" cols="80" name="bookOther"></textarea>
                </td>
            </tr>
            <script language="javascript">
                function getChildTypeId() {
                    document.getElementById("childTypeId").value = document.getElementById("childType").value;
                }
            </script>
            <tr>
                <td colspan="2" align="center">
                    <input type="hidden" id="childTypeId" name="childTypeId" value="0"/>
                    <input type="submit" name="submit" value="提交" onclick="getChildTypeId()"/>
                </td>
            </tr>
        </table>
    </form>
</div>